<template>
  <div class="is-pay">
    <p class="is-pay-title">
      <img v-if="payId === 0" src="../../static/wx.png" alt="微信支付" />
      <img v-else-if="payId === 1" src="../../static/alipay.png" alt="支付宝" />
      <span v-else>支付状态</span>
    </p>
    <div class="imgBox">
      <img v-if="payId === 0" :src="imgUrl" />
      <p v-else>是否完成支付？</p>
    </div>
    <div class="submit">
      <button class="confirm" type="button" @click="submit">我已支付</button>
      <button class="cancel" type="button" @click="cancel">取消支付</button>
    </div>
  </div>
</template>

<script>
// import { updateResume } from '@/api/users';
export default {
  props: ['imgPath', 'pay'],
  data () {
    return {
      imgUrl: '',
      payId: null
    }
  },
  watch: {
    imgPath (val) {
      this.imgUrl = val;
    },
    pay (val) {
      this.payId = val;
    }
  },
  created () {
    this.imgUrl = this.imgPath || '';
    this.payId = this.pay;
  },
  mounted () {
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    },
    submit () {
      this.$emit('confirm');
    },
  }
}
</script>
<style lang="scss" scoped>
.is-pay {
  position: relative;
  padding: 40px 0 40px 0;

  .is-pay-title {
    text-align: center;
    span {
      color: $base-color;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .imgBox {
    img {
      display: block;
      height: 200px;
      width: 200px;
      margin: 20px auto;
    }
    p {
      height: 120px;
      line-height: 120px;
      font-size: 24px;
      color: #333;
      text-align: center;
      font-weight: 600;
    }
  }
  .submit {
    margin-top: 30px;
    margin-bottom: 0;
  }
}
</style>
